<!DOCTYPE html>
<html>
<head>
	<title>lineDashOffset</title>
</head>
<body>

	<canvas id="canvas" width="200" height="300px" style="border: 1px solid #ccc"></canvas>

	<script type="text/javascript">

		// var canvas = document.getElementById("canvas");
		// var ctx = canvas.getContext("2d");

		// ctx.setLineDash([10, 10]);
		// console.log(ctx.getLineDash()); // [5, 15]

		// ctx.lineDashOffset = 6;

		// ctx.beginPath();
		// ctx.moveTo(0,100);
		// ctx.lineTo(200, 100);
		// ctx.stroke();


		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var offset = 0;

		function draw() {

			// console.log(canvas.width)
			// console.log(canvas.height)

			ctx.clearRect(0,0, canvas.width, canvas.height);
			ctx.setLineDash([4, 2]);

			ctx.lineDashOffset = -offset;
  			ctx.strokeRect(10,10, 100, 100);

		}

		function march() {
			offset++;

			if (offset > 16) {
				offset = 0;
			}

			draw();
			setTimeout(march, 20);
		}

		march();



	</script>

</body>
</html>